<!DOCTYPE html>
<html>

<head>
	<meta charset="utf-8" />
	<title>制作图片切换效果</title>

	<style type="text/css">
		body {
			margin: 20px auto;
			padding: 0;
			width: 580px;
			font: 75%/120% Arial, Helvetica, sans-serif;
		}

		h2 {
			font: bold 190%/100% Arial, Helvetica, sans-serif;
			margin: 0 0 .2em;
		}

		h2 em {
			font: normal 80%/100% Arial, Helvetica, sans-serif;
			color: #999999;
		}

		#largeImg {
			border: solid 1px #ccc;
			width: 550px;
			height: 400px;
			padding: 5px;
		}

		.thumbs img {
			border: solid 1px #ccc;
			width: 100px;
			height: 100px;
			padding: 4px;
		}

		.thumbs img:hover {
			border-color: #FF9900;
		}

		.alpha {
			filter: alpha(Opacity=50);
			-moz-opacity: 0.5;
			opacity: 0.5;
		}
	</style>
	<script type="text/javascript" src="js/jquery-1.12.4.js">
	</script>
	<script type="text/javascript">
		$(document).ready(function () {

			$("p img").addClass("alpha");
			$("#largeImg").removeClass("alpha");
			$("p>a").mouseover(function () {
				$(this).children("img").removeClass("alpha");
				var big_src = $(this).attr("href");

				$("#largeImg").attr("src", big_src);

				return false;

			});

			$('p>a').mouseleave(function () {
				$(this).children("img").addClass("alpha");
			});



		});
	</script>
</head>

<body>

	<h2>图片切换</h2>

	<p><img id="largeImg" src="images/img1-lg.jpg" alt="Large image" /></p>

	<p class="thumbs">
		<a href="images/img2-lg.jpg" title="Image 2"><img src="images/img2-thumb.jpg" /></a>
		<a href="images/img3-lg.jpg" title="Image 3"><img src="images/img3-thumb.jpg" /></a>
		<a href="images/img4-lg.jpg" title="Image 4"><img src="images/img4-thumb.jpg" /></a>
		<a href="images/img5-lg.jpg" title="Image 5"><img src="images/img5-thumb.jpg" /></a>
		<a href="images/img6-lg.jpg" title="Image 6"><img src="images/img6-thumb.jpg" /></a>
	</p>
	<br />
</body>

</html>